<template>

  <el-dialog width="30%" :title="id == null ? '角色添加' : '角色编辑'" :visible.sync="dialogVisible" :close-on-click-modal="false">

    <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="140px" label-position="left" :inline="false" style="width: 400px;">
      <el-form-item label="名称" size="mini" prop="name">
        <el-input placeholder="" v-model="mainQuery.name" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
  
      <el-form-item label="状态" size="mini" prop="status">
        <el-select v-model="mainQuery.status" :disabled="loading" placeholder="未选择" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="代理商/销售？" size="mini" prop="status">
        <el-select v-model="mainQuery.extraType" :disabled="id != null" placeholder="未选择" clearable>
          <el-option
            v-for="item in extraTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    <el-form-item label="备注" size="mini" prop="remark">
        <el-input placeholder="" v-model="mainQuery.remark" :disabled="loading" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">取 消</el-button>
        <el-button @click="submit" size="mini" type="primary" :loading="loading">提 交</el-button>
      </div>
  </el-dialog>
</template>

<script>

import ApiMain from '@/api/system.role';

export default {
  mixins: [
  ],
  props: [
    'statusOptions',
    'boolOptions',
  ],
  data () {
    return {

      dialogVisible   : false,
      popDeleteVisible: false,
      loading         : false,

      mainQuery: {
        name  : '',
        remark: '',
        status: '',
        extraType: 0
      },

      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ],
      },

      extraTypeOptions: [
        {label: '都不是', value: 0},
        {label: '销售', value: 1},
        {label: '代理商', value: 2},
        // {label: '销售总监', value: 3},
      ],

      id  : null,
      data: null,

    }
  },
  mounted () {
  },

  methods: {

    show (id) {

      this.reset();

      if (id) {
        this.id = id;
        this.fetchData();
      }

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {

      this.$refs['main-form'] && this.$refs['main-form'].resetFields();
        
      this.id   = null;
      this.data = null;

      this.mainQuery = {
        name  : '',
        remark: '',
        status: '',
        extraType: 0
      };
    },

    async fetchData () {

      this.loading = true;

      try {
        var re = await ApiMain.info({id: this.id});
        this.data = re;
      } catch (err) {
        this.data = null;
      }

      if (this.data) {
        this.mainQuery.name   = this.data.name;
        this.mainQuery.remark = this.data.remark;
        this.mainQuery.status = this.data.status;
        this.mainQuery.extraType = this.data.extraType;
      }

      this.loading = false;

    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      if (this.id) {
        await this.submitSet();
      }
      else {
        await this.submitAdd();
      }

      this.loading = false;

    },

    async submitAdd () {

      try {
        await ApiMain.add(this.mainQuery);
        this.$message({message: '添加成功', type: 'success'});
        this.close();
      } catch (err) {
      }

    },

    async submitSet () {

      this.mainQuery.id = this.id;

      try {
        await ApiMain.set(this.mainQuery);
        this.$message({message: '修改成功', type: 'success'});
        this.close();
      } catch(e) {
      }

    },

    async submitDel () {
      this.popDeleteVisible = false;
      this.loading = true;

      try {
        await ApiMain.del({id: this.id})
        this.$message({message: '删除成功', type: 'success'});
        this.close();
      } catch(e) {
      }

      this.loading = false;

    },
  }
}
</script>

<style>

</style>
